<template>
  <view class="tab-wrapper">
    <view class="tab-inner">
      <view
        v-for="(item, index) in tabs"
        :key="index"
        class="tab"
        @tap="setCurrentTab(index)"
      >
        <image
          v-if="currentIndex === index"
          class="tab-icon"
          :src="item.active_icon"
        />
        <image v-else class="tab-icon" :src="item.inactive_icon" />
        <text
          :class="{
            'tab-text': true,
            active: currentIndex === index,
            border: needIndicator && currentIndex === index
          }"
        >{{ item.title }}</text>
      </view>
    </view>
    <view class="tab-safe" />
  </view>
</template>
<script>
export default {
  name: "",
  components: {},
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    needIndicator: {
      type: Boolean,
      default: false
    },
    value: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0
    };
  },
  computed: {},
  watch: {
    value(val) {
      this.currentIndex = val;
    }
  },
  created() {},
  mounted() {},
  methods: {
    setCurrentTab(idx) {
      this.currentIndex = idx;
      this.$emit("input", idx);
      this.$emit("change", idx);
    }
  }
};
</script>
